<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS 字典</title>
    <script>

        //  在 OC和Java 中的字典和Js 中的数组还是有区别的
        //  key 值不一定要是一个 string 类型

        /*
        对于javascript来说，字典类(Dictionary)的基础是Array类，
        js中的Array既是一个数组，同时也是一个字典。 这个比较奇特 
        地址：  https://blog.csdn.net/ganyingxie123456/article/details/78163154
        */

        function testSimpleDictionary(){

            var dic = {c:4, a:2, d:3, b:1}; // 定义一个字典

            console.log("输出最初的字典元素: "); 
            for(var key in dic){
                console.log("key: " + key + " ,value: " + dic[key]);
            }

            console.log("字典元素按key值排序: ");
            var res = Object.keys(dic).sort(); 
            for(var key in res){
                console.log("key: " + res[key] + " ,value: " + dic[res[key]]);
            }

            console.log("字典元素按value值排序: ");
            var res2 = Object.keys(dic).sort(function(a,b){ return dic[a]-dic[b]; });
            for(var key in res2){
                console.log("key: " + res2[key] + " ,value: " + dic[res2[key]]);
            }
        }

        /*
        
        */  
        function testDictionaryTwo (){
            var  dic = new Array();  // 定义一个字典
            dic['one'] = '1';  // 添加字典元素 
            dic['three'] = '3';
            dic['two'] = '2';
            dic['8'] = 'seven';
            dic['five'] = '5';
            dic['four'] = '4';
            dic['9'] = 'nine';
            dic['six'] = '6';
            dic['7'] = 'eight';
            for (var key in dic){   // 我很好奇 它怎么知道这是 key？而不是一个item 元素 
                console.log(key + ':' + dic[key])
            }

            delete dic['one']; // 删除元素 (方法一)
            delete dic['six']; // 
            for (var key in  dic){
                console.log(key + ' : ' + dic[key]);
            }
        }


        /*
        封装的JS 字典常规操作  func 也可以是对象 
        */
        function Dictionary(){
            this.dataStore = new Array();
            this.add = add;
            this.show = show;
            this.find = find;
            this.remove = remove;
            this.count = count;
            this.kSort = kSort;
            this.vSort = vSort;
            this.clear = clear;
        }

        function add(key, value){   // 添加字典的键值(key:value)
            this.dataStore[key] = value;
        }
        function show(){            //显示字典中的键值(key:value)
            for(var key in this.dataStore){
                console.log(key + " : " + this.dataStore[key]);
            }
        }
        function find(key){         // 根据键(key)查找对应的值(value),返回值value
            return this.dataStore[key];
        }
        function remove(key){       // 根据键(key)删除对应的值(value)
            delete this.dataStore[key];
        }
        function count(){           // 计算字典中的元素个数
            var n = 0;
            for(var key in Object.keys(this.dataStore)){
                ++n;
            }
            return n;
        }
        function kSort(){           // 字典按值(value)排序,并输出排序后的结果
            var dic = this.dataStore;
            var res = Object.keys(dic).sort();
            for(var key in res ){
                console.log(res[key] + " : " + dic[res[key]]);
            }
        }
        function vSort(){           // 字典按值(value)排序,并输出排序后的结果
            var dic = this.dataStore;
            var res = Object.keys(dic).sort(function(a,b){ 
                return dic[a]-dic[b]; 
            });
            for(var key in res ){
                console.log(res[key] + " : " + dic[res[key]]);
            }
        }
        function clear(){           // 清空字典内容
            for(var key in this.dataStore){
                delete this.dataStore[key];
            }
        }

        function testCustomDictionary(){
            var dic = new Dictionary();  // 构造字典
            dic.add('one','1');
            dic.add('three', '3');
            dic.add('two', '2');
            dic.add('8', 'seven');
            dic.add('five', '5');
            dic.add('four', '4');
            dic.add('9', 'nine');
            dic.add('six', '6');
            dic.add('7', 'eight');

            dic.show();
            var count = dic.count();
            console.log('count is:' + count);
            dic.vSort();
            dic.kSort();
            var findValue = dic.find('one');
            console.log('finde value is:' + findValue);

            var removeValue = dic.remove('one');
            var findValue2 = dic.find('one');
            console.log('finde value is:' + findValue2);

            var findValue3 = dic.find(9);  // ！！！ 注意：这里也可以找到  虽然不是 '9'
            console.log('finde value3 is:' + findValue3);
            var removeValue2 = dic.remove(9)

            dic.clear();
            dic.show();
            
        }

        /*
        笔者自己的测试 我们不指定类型加入一些元素
        */
        function testNotSameTypeEleme(){
            //
            var  dic = new Dictionary();   // 其实这个是我们自己新疆的字典 
            var  obj = {
                'name':'D',
                'age':'24',
                'addre':'SZ'
            }
            dic.add('one','1');
            dic.add('two',obj);   // 是允许传入不同的数据类型 和 Java 中还是有区别
            dic.show();   // 这里的这种写法和 Java中一些也类似 
        }


    </script>
</head>
<body>
    <button onclick="testSimpleDictionary()">测试简单的字典</button>
    <button onclick="testDictionaryTwo()">遍历 删除字典中的元素</button>
    <button onclick="testCustomDictionary()">测试 自定义的字典类 看是否能用 </button>
    <button onclick="testNotSameTypeEleme()">测试 不同的元素类型</button>
</body>
</html>